<template>
	<!-- #ifdef MP-WEIXIN -->
	<view class="title_box"
		:style="{'margin-top':`${menuButtonInfo.top}px`,'height':`${menuButtonInfo.height}px`,'font-size':`${menuButtonInfo.height/2}px`}">
		<navigator open-type="navigateBack" delta="1"
			:style="{'height':`${menuButtonInfo.height}px`,'width':`${menuButtonInfo.height}px`}">
			<image src="/static/icon/back.png" mode="heightFix" />
		</navigator>
		<view style="flex: 1;" />
		<image src="/static/icon/anquan.png" mode="heightFix" style="margin-right: 10rpx;" />安全保障中
		<view style="flex: 1;" />
		<view :style="{'height':`${menuButtonInfo.height}px`,'width':`${menuButtonInfo.height}px`}" />
	</view>
	<!-- #endif -->
	<!-- #ifdef MP-ALIPAY -->
	<view class="title_box" style="margin-top: 50rpx;height: 60rpx;font-size: 35rpx;">
		<view style="flex: 1;" />
		<image src="/static/icon/anquan.png" mode="heightFix" style="margin-right: 10rpx;" />安全保障中
		<view style="flex: 1;" />
	</view>
	<!-- #endif -->
	<template v-if="step==1">
		<image src="/static/account_security_center/title3.png" mode="heightFix"
			style="height: 45rpx;width: auto;margin-top: 120rpx;" />
		<view style="margin-top: 20rpx;font-size: 28rpx;width: 600rpx;text-align: center;">当前操作仅限 {{name}}
			本人操作，请确保实名信息一致
		</view>
		<image src="https://cdn.meijingnet.cn/huishou/static/img/face_recognition.png"
			style="height: 400rpx;width: 400rpx;margin-top: 80rpx;" />
		<view style="color: #62748E;font-size: 24rpx;margin-top: 60rpx;width: 600rpx;text-align: center;">
			根据法律法规和监管要求，为保障交易安全，需要手机您的人脸信息用于实人认证，平台将保护您的个人信息安全。</view>
		<view @click="renlianshibie" class="btn">人脸认证识别</view>
	</template>
	<template v-else-if="step==2">
		<image src="https://cdn.meijingnet.cn/huishou/static/img/face_recognition_fail.png" mode="widthFix"
			style="width: 300rpx;height: auto;margin-top: 120rpx;" />
		<view @click="renlianshibie" style="color: #62748E;font-size: 24rpx;margin-top: 20rpx;">请重新尝试</view>
	</template>
</template>

<script>
	import api from '@/utils/api.js';
	import {
		initEid,
		startEid
	} from '@/mp_ecard_sdk/main';
	export default {
		data() {
			return {
				menuButtonInfo: {},
				name: '',
				step: 1,
				certifyId: null,
			}
		},
		onLoad(options) {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.name = options.name;
			// #ifdef MP-WEIXIN
			initEid();
			// #endif
		},
		onShow() {
			if (this.certifyId) {
				this.eid_result();
			}
		},
		methods: {
			/**
			 *  startEid(options) ：进⼊实名认证⻚⾯。
			 *	options ：Object required 接⼊⽅传⼊的参数。
			 *	options.data.token ：String required 接⼊⽅⼩程序从接⼊⽅服务端获取 EidToken。
			 *	options.data.needJumpPage:是否需要中转页，默认为 false（uni-sdk v1.0.3 及以上支持）
			 *	options.verifyDoneCallback ：Function(res) required 核身完成的回调。res 包含验证成功的 token，是否完成的布尔值标志 verifyDone。请根据 res 返回的结果进⾏业务处理判断。
			 */
			async renlianshibie() {
				// #ifdef MP-WEIXIN
				let {
					result
				} = await api.eid_token();
				let that = this;
				startEid({
					data: {
						token: result,
					},
					verifyDoneCallback(res) {
						const {
							token,
							verifyDone
						} = res;
						if (verifyDone) {
							that.eid_result(token);
						}
					},
				});
				// #endif
				// #ifdef MP-ALIPAY
				let {
					result
				} = await api.ali_eid_token();
				this.certifyId = result.certifyId
				// uni.navigateTo({
				// 	url: '/pages/web/web?src=' + encodeURIComponent(result)
				// })
				my.startAPVerify({
					url: result.url,
					certifyId: result.certifyId,
					success: function(res) {
						console.log('success', res)
					},
					fail: function(res) {
						console.log('fail', res)
					},
					complete: function(res) {
						console.log('complete', res)
					}
				})
				// #endif
			},
			async eid_result(token) {
				let result;
				// #ifdef MP-WEIXIN
				let e = await api.eid_result({
					eidToken: token
				});
				result = e.result;
				// #endif
				// #ifdef MP-ALIPAY
				let e = await api.ali_eid_result(this.certifyId);
				result = e.result;
				// #endif
				if (result == '认证成功' || result === true) {
					uni.showToast({
						title: '认证成功',
						icon: 'success',
						duration: 1500
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				} else {
					this.step = 2;
				}
			},

		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}

	.title_box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 36rpx;
		box-sizing: border-box;
		font-weight: bold;
	}

	.title_box image {
		height: 80%;
		width: auto;
	}

	.title_box navigator {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn {
		background-color: #FFDF20;
		width: 600rpx;
		height: 100rpx;
		font-size: 34rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
	}
</style>